{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<div id="div1" style="width:400px; height:300px; background-color:red; border:1px solid red">div1</div>
<div>
	<input type="button" id="button1" value="改变宽度" onclick="test4(this)" />
	<input type="button" id="button2" value="改变颜色" onclick="test4(this)" />
	<input type="button" id="button2" value="改变内容" onclick="test4(this)" />

</div>

<h6>代码</h6>
<pre>
页面部分
&lt;div id="div1" style="width:400px; height:300px; background-color:red; border:1px solid red"&gt;div1&lt;/div&gt;
&lt;div&gt;
	&lt;input type="button" id="button1" value="改变宽度" onclick="test4(this)" /&gt;
	&lt;input type="button" id="button2" value="改变颜色" onclick="test4(this)" /&gt;
	&lt;input type="button" id="button2" value="改变内容" onclick="test4(this)" /&gt;

js 部分
&lt;script language="javascript"&gt;
function test4(m) {
	if (m.value == "改变宽度") {
		var div1 = document.getElementById('div1');
		window.alert(div1.style.width);
		div1.style.width = "200px";
	} else if (m.value == "改变颜色") {
		var div1 = document.getElementById('div1');
		div1.style.backgroundColor = "green";
	} else if (m.value == "改变内容") {
		var div1 = document.getElementById('div1');
		div1.innerText = '改变内容';
	}
}
&lt;/script&gt;
	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
	function test4(m) {
		if (m.value == "改变宽度") {
			var div1 = document.getElementById('div1');
			window.alert(div1.style.width);
			div1.style.width = "200px";
		} else if (m.value == "改变颜色") {
			var div1 = document.getElementById('div1');
			div1.style.backgroundColor = "green";
		} else if (m.value == "改变内容") {
			var div1 = document.getElementById('div1');
			div1.innerText = '改变内容';
		}
	}
</script> {/block}